<template>
	<view class="container">
		<view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-margin-top" style="margin-bottom:60rpx">
			<view class="gui-title-line"></view>
			<text class="gui-primary-color gui-h6" style="padding-left:50rpx; padding-right:50rpx;">{{ title }}</text>
			<view class="gui-title-line"></view>
		</view>
		<form @submit="submit">
			<view class="gui-margin-top">
				<text class="gui-color-black"><text class="gui-color-red">*</text>商品名称</text>
			</view>
			<view class="gui-form-item gui-border-b">
				<input type="text" class="gui-form-input" v-model="formData.title" name="title" placeholder="请输入名称" />
			</view>
			<view class="gui-margin-top">
				<text class="gui-color-black"><text class="gui-color-red">*</text>选择分类</text>
			</view>
			<view class="gui-form-item gui-border-b" @click="handleClickSelectCategory" style="padding:30rpx 0">
				<text class="gui-color-gray" v-if="!categoryName">点击选择</text>
				<text class="gui-color-gray" v-else>{{ categoryName }}</text>
			</view>
			<view class="gui-margin-top">
				<text class="gui-color-black"><text class="gui-color-red">*</text>商品图片</text>
			</view>
			<view class="gui-form-item gui-border-b">
				<gui-upload-images @uploaded="uploaded1" ref="uploadimgcom" maxFileNumber="2"></gui-upload-images>
			</view>
			<view class="gui-margin-top">
				<text class="gui-color-blacky"><text class="gui-color-red">*</text>原价</text>
			</view>
			<view class="gui-form-item gui-border-b">
				<input type="text" class="gui-form-input" v-model="formData.market_price" name="market_price"
					placeholder="请输入原价" />
			</view>
			<view class="gui-margin-top">
				<text class="gui-color-blacky"><text class="gui-color-red">*</text>成本价</text>
			</view>
			<view class="gui-form-item gui-border-b">
				<input type="text" class="gui-form-input" v-model="formData.cost_price" name="cost_price"
					placeholder="请输入成本价" />
			</view>
			<view class="gui-margin-top">
				<text class="gui-color-black"><text class="gui-color-red">*</text>商品售价</text>
			</view>
			<view class="gui-form-item gui-border-b">
				<input type="text" class="gui-form-input" v-model="formData.price" name="price" placeholder="请输入" />
			</view>
			<!-- <view class="gui-margin-top">
				<text class="gui-color-black">尺码</text>
			</view>
			<view class="gui-form-item gui-border-b">
				<input type="text" class="gui-form-input" v-model="formData.name1" name="name1" placeholder="请输入" />
			</view> -->
			<view class="gui-margin-top">
				<text class="gui-color-black"><text class="gui-color-red">*</text>单位</text>
			</view>
			<view class="gui-form-item gui-border-b gui-color-gray">
				<input type="text" class="gui-form-input" v-model="formData.sku" name="sku" placeholder="请输入例如(个/件)" />
			</view>
			<view class="gui-margin-top">
				<text class="gui-color-black"><text class="gui-color-red">*</text>商品库存</text>
			</view>
			<view class="gui-form-item gui-border-b">
				<input type="text" class="gui-form-input" v-model="formData.stock" name="stock" placeholder="请输入" />
			</view>
			<view class="gui-margin-top">
				<text class="gui-color-black"><text class="gui-color-red">*</text>最低起售量</text>
			</view>
			<view class="gui-form-item gui-border-b">
				<input type="text" class="gui-form-input" v-model="formData.minimum_sales_volume"
					name="minimum_sales_volume" placeholder="请输入" />
			</view>
			<view class="gui-margin-top">
				<text class="gui-color-black"><text class="gui-color-red">*</text>最大可退货比例(%)</text>
			</view>
			<view class="gui-form-item gui-border-b">
				<input type="text" class="gui-form-input" v-model="formData.maximum_return_ratio"
					name="maximum_return_ratio" placeholder="请输入" />
			</view>
			<view class="gui-margin-top">
				<text class="gui-color-black"><text class="gui-color-red">*</text>最迟退货时间（天数）</text>
			</view>
			<view class="gui-form-item gui-border-b">
				<input type="text" class="gui-form-input" v-model="formData.latest_return_time"
					name="latest_return_time" placeholder="请输入" />
			</view>
			<view class="gui-margin-top">
				<text class="gui-color-black"><text class="gui-color-red">*</text>是否上架</text>
			</view>
			<view class="gui-form-item gui-border-b" style="padding:30rpx 0">
				<switch @change="changeSwitch" color="#F29C39" :checked="formData.status" />
			</view>
			<view class="gui-margin-top">
				<text class="gui-color-black"><text class="gui-color-red">*</text>显示位置</text>
			</view>
			<view class="gui-form-item gui-border-b gui-color-gray" style="padding:30rpx 0">
				<gui-radio @change="handleChangeRadio1" ref="radio1">全网可见</gui-radio>
				<gui-radio @change="handleChangeRadio2" ref="radio2" style="margin-left:20rpx">仅客户可见</gui-radio>
			</view>
			<view class="gui-margin-top">
				<text class="gui-color-black"><text class="gui-color-red">*</text>商品详情描述</text>
			</view>
			<view class="gui-form-item gui-border-b" style="padding:20rpx 0">
				<textarea v-model="formData.content_text" name="content_text" value="" placeholder="说点什么..."
					class="gui-textarea gui-bg-gray gui-border-box" style="width:690rpx;" />
			</view>
			<view class="gui-margin-top">
				<text class="gui-color-black"><text class="gui-color-red">*</text>商品详情图片</text>
			</view>
			<view class="gui-form-item gui-border-b" style="padding:20rpx 0">
				<gui-upload-images @uploaded="uploaded2" ref="uploadimgcom1"></gui-upload-images>
			</view>
			<view style="margin-top:60rpx" @click="onSubmit">
				<view class="gui-text-center gui-bg-blue" hover-class="gui-tap">
					<text
						class="gui-text gui-color-white gui-footer-large-button-text gui-block-text gui-text-center">保存</text>
				</view>
			</view>
		</form>

		<!-- 选择分类 -->
		<gui-modal ref="guimodal1" title="产品分类" width="90%">
			<view slot="content" class="gui-padding">
				<scroll-view class="return-product-box" :scroll-y="true">
					<category @change="changeCategory" :is-select="true"></category>
				</scroll-view>
			</view>
			
		</gui-modal>
	</view>
</template>

<script>
	import category from '@/pages/category/manage.vue'
	import {
		UPLOAD_URL
	} from '@/common/config.js';
	export default {
		components: {
			category
		},
		props: {
			goodId: {
				type: Number,
				default: -1
			}
		},
		data() {
			return {
				title: '添加商品',
				uploadUrl: UPLOAD_URL,
				categoryName: '',
				formData: {
					title: '',
					category_pid: '',
					category_cid: '',
					market_price: '',
					cost_price: '',
					price: '',
					stock: '',
					minimum_sales_volume: '',
					maximum_return_ratio: '',
					latest_return_time: '',
					network_status: '',
					status: 0,
					thumb: '',
					thumb_url: [],
					sku: '',
					good_content: [],
				},
				// 记录需要上传的图片数据
				needPploadedImgs: [],
				// 文本框输入内容记录
				textareaVal: ' ',
				// 上传按钮名称
				subtxt: "+ 发布"
			}
		},
		onShareAppMessage(res) {
			return this.$utils.onShareAppMessage();
		},
		onUnload(){
			clearTimeout(this.timer)
		},
		mounted() {
			console.log(this.goodId)
			if (this.goodId !== -1) {
				this.title = '编辑商品';
				this.formData['goods_id'] = this.goodId
				this.getDetail();
			}
		},
		methods: {
			async getDetail() {
				const res = await this.$http.get(
					`route=plugin.supplier.frontend.goods.goods-detail&goods_id=${this.goodId}`);
				this.formData.title = res.data.title;
				this.formData.category_pid = res.data.category_ids.parentid;
				this.formData.category_cid = res.data.category_ids.childid;
				this.formData.market_price = res.data.market_price;
				this.formData.cost_price = res.data.cost_price;
				this.formData.price = res.data.price;
				this.formData.stock = res.data.stock;
				this.formData.minimum_sales_volume = res.data.minimum_sales_volume;
				this.formData.maximum_return_ratio = res.data.maximum_return_ratio;
				this.formData.latest_return_time = res.data.latest_return_time;
				this.formData.network_status = res.data.network_status;
				this.formData.status = res.data.status;
				this.formData.thumb = res.data.thumb;
				this.formData.thumb_url = res.data.thumb_url;
				this.formData.sku = res.data.sku;
				this.formData.good_content = res.data.thumb_url;
				this.formData.content_text = res.data.content_text;
				if (res.data.network_status == 1) {
					this.$refs.radio1.status = true;
				} else {
					this.$refs.radio2.status = true;
				}
				res.data.thumb_url.forEach((item) => {
					this.$refs.uploadimgcom.imgLists.push({
						url: item
					})
					this.$refs.uploadimgcom1.imgLists.push({
						url: item
					})
				})
				this.getCategoryList()

			},
			//分类列表
			async getCategoryList() {
				const res = await this.$http.get(`route=plugin.supplier.frontend.goods.get-category`);
				let str = '';
				let self = this;
				res.data.forEach(item=>{
					if(item.id == self.formData.category_pid){
						str+=item.name+'-';
						item.childrens.forEach(child=>{
							if(child.id == self.formData.category_cid){
								str+= child.name
							}
						})
					}
				})
				this.categoryName = str

			},
			// 商品图片
			uploaded1: function(imgList) {
				console.log(imgList)
				let list = [];
				imgList.forEach(item => {
					list.push(item.result.data.img_url)
				})
				this.formData.thumb_url = list;
				this.formData.thumb = list[0];
			},
			// 详情图片
			uploaded2: function(imgList) {
				console.log(imgList)
				let list = [];
				imgList.forEach(item => {
					list.push(item.result.data.img_url)
				})
				this.formData.good_content = list;
			},
			changeCategory(item, child) {
				this.formData.category_pid = item.id;
				this.formData.category_cid = child.id;
				this.categoryName = item.name + '-' + child.name;
				this.close1()
			},
			open1: function() {
				this.$refs.guimodal1.open();
			},
			close1: function() {
				this.$refs.guimodal1.close();
			},
			confirm1: function() {
				this.$refs.guimodal1.close();
			},
			handleClickSelectCategory() {
				this.open1();
			},
			changeSwitch(res) {
				this.formData.status = res.detail.value ? 1 : 0
			},
			//显示位置
			handleChangeRadio1(res) {
				this.$refs.radio2.status = false;
				this.$refs.radio1.status = true;
				this.formData.network_status = 1;
			},
			//显示位置
			handleChangeRadio2(res) {
				this.$refs.radio1.status = false;
				this.$refs.radio2.status = true;
				this.formData.network_status = 0;
			},
			clearForm() {
				for (let key in this.formData) {
					if (this.formData[key] instanceof Array) {
						this.formData[key] = []
					} else {
						this.formData[key] = ''
					}
				}
				this.$refs.uploadimgcom.imgLists = []
				this.$refs.uploadimgcom1.imgLists = []
				this.formData.status = 0;
				this.$refs.radio1.status = false;
				this.$refs.radio2.status = false;
				console.log(this.formData)

			},
			onVerify() {
				if (this.formData.title === '') {
					uni.showToast({
						title: '请填写商品名称',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				if (this.formData.category_pid === '' || this.formData.category_cid === '') {
					uni.showToast({
						title: '请选择产品分类',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				if (this.formData.thumb_url.length === 0) {
					uni.showToast({
						title: '请上传商品图片',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}

				if (this.formData.market_price === '') {
					uni.showToast({
						title: '请填写原价',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				if (this.formData.cost_price === '') {
					uni.showToast({
						title: '请填写商品成本价',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				if (this.formData.price === '') {
					uni.showToast({
						title: '请填写商品售价',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				if (this.formData.sku === '') {
					uni.showToast({
						title: '请填单位',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				if (this.formData.stock === '') {
					uni.showToast({
						title: '请填写库存',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				if (this.formData.minimum_sales_volume === '') {
					uni.showToast({
						title: '请填写最低起售量',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				if (this.formData.maximum_return_ratio === '') {
					uni.showToast({
						title: '请填写最大可退货比例',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				if (this.formData.latest_return_time === '') {
					uni.showToast({
						title: '请填写最迟退货时间',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				if (this.formData.network_status === '') {
					uni.showToast({
						title: '请选择显示位置',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				if (this.formData.latest_return_time === '') {
					uni.showToast({
						title: '请选择显示位置',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				if (this.formData.content_text === '') {
					uni.showToast({
						title: '请填写详情文字',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				if (this.formData.good_content.length === 0) {
					uni.showToast({
						title: '请上传商品详情图片',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}

				return true
			},
			onSubmit(){
				if(this.goodId != -1){
					this.onEdit()
				}else{
					this.onAdd()
				}
			},
			async onAdd() {
				if (!this.onVerify()) {
					return false;
				}
				const res = await this.$http.post(`route=plugin.supplier.frontend.goods.add-goods`, {
					...this.formData
				});
				uni.showToast({
					title: "保存成功！",
					icon: "success"
				});
				this.clearForm();
				this.$utils.navigateBack();
			},
			async onEdit() {
				if (!this.onVerify()) {
					return false;
				}
				const res = await this.$http.post(`route=plugin.supplier.frontend.goods.edit-goods`, {
					...this.formData
				});
				uni.showToast({
					title: "编辑成功！",
					icon: "success"
				});
				this.$utils.navigateBack();
				
			},
			
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.small-text {
		font-size: 22rpx;
	}

	.title1-margin {
		margin: 0 20rpx;
	}

	.fixed-top-view {
		height: 88rpx;
		background-color: #F8F8F8;
		padding: 0 25rpx;
	}

	.return-product-box {
		height: 70vh;
		overflow: auto;
		padding-bottom: 40rpx;
		margin-top: 40rpx;
	}

	.modal-btns {
		line-height: 88rpx;
		font-size: 26rpx;
		text-align: center;
		width: 200rpx;
	}
</style>